<template>
  <div v-if="detailsDate">
    <el-row class="detailsRow">
      <el-col :span="12">
        <div class="details-row">
          <span>设备名称：</span>
          <span>{{ detailsDate.zcmc }}</span>
        </div>
        <div class="details-row rowRelative">
          <span>辖区：</span>
          <span>{{ detailsDate.zcsfmc + detailsDate.zccsmc + detailsDate.zcqxmc + detailsDate.zcjdmc }}</span>
        </div>
        <div class="details-row">
          <span>设备IP：</span>
          <span>{{ detailsDate.zcip }}</span>
        </div>
        <div class="details-row">
          <span>品牌：</span>
          <span>{{ detailsDate.ppmc }}</span>
        </div>
        <div class="details-row">
          <span>型号：</span>
          <span>{{ detailsDate.zcxh }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="details-row">
          <span>检测时间：</span>
          <span>{{ detailsDate.xgsj | dateFormat }}</span>
        </div>
        <div :class="['details-row', detailsDate.lxzt === 0 ? 'f_039D12' : detailsDate.lxzt === 1 ? 'f_F56C6C' : 'f_333333']">
          <span>检测结果：</span>
          <!-- 录像状态(0正常 1异常) -->
          <span>{{ detailsDate.lxzt === 0 ? '正常' : detailsDate.lxzt === 1 ? '异常' : '录像文件丢失' }}</span>
        </div>
        <div class="details-row">
          <span>未录像时长：</span>
          <span v-if="detailsDate.differ === 0" :class="['left', 'f_039D12']">无</span>
          <span v-else :class="['left', 'f_F56C6C']" style="width: auto">{{ detailsDate.differ | dateFormat3 }}</span>
        </div>
        <div class="details-row">
          <span>工单状态：</span>
          <span :class="[`type${detailsDate.gdzt}`, 'type', 'left']">{{ type[detailsDate.gdzt] }}</span>
        </div>
        <div class="details-row">
          <span>宿主：</span>
          <span>
            <span v-for="(item, index) in detailsDate.szs" :key="index" class="szs">
              <el-tooltip v-if="Number(item.SZLX) >= 0" class="item" placement="top-start" popper-class="atooltip">
                <div slot="content">{{ item.SZMC }}</div>
                <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                  <!-- 0运维主机 1卡口 2电警 -->
                  <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                </svg>
              </el-tooltip>
              <svg v-else class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                <!-- 0运维主机 1卡口 2电警 -->
                <use :xlink:href="`#el-icon-my${grayIcon[index]}`" style="font-size: 50px" />
              </svg>
            </span>
          </span>
        </div>
      </el-col>
    </el-row>
    <p class="times">
      巡检时间段：
      <span class="f_1989FA" v-if="detailsDate.starttime || detailsDate.endtime">{{ detailsDate.starttime + '~' + detailsDate.endtime.split(' ')[1] }}</span
      >未录像时长：
      <span v-if="detailsDate.differ === 0" class="type f_039D12">无</span>
      <span v-else class="type f_F56C6C">{{ detailsDate.differ | dateFormat3 }}</span>
    </p>
    <div class="lendge">
      <span>有录像</span>
      <span>无录像</span>
    </div>
    <timeline-canvas :timeList="detailsDate" />
  </div>
</template>
<script>
import timelineCanvas from '@/components/RunTesting/timeline-canvas'
export default {
  components: { timelineCanvas },
  props: ['detailsDate'],
  watch: {
    detailsDate: {
      deep: true,
      handler(newVal, oldVal) {
        this.detailsDate = newVal
        // this.getJc(newVal.jsonstr)
      },
    },
  },
  data() {
    return {
      type: ['未生成', '已受理', '待确认', '正常关闭', '驳回', '挂起', '外派'], // 正常和异常关闭不需要
      timeList: {},
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
      ticketStatus: [''],
    }
  },
  created() {
    // this.getJc(this.detailsDate.jsonstr)
  },
  methods: {
    getJc(jsonstr) {
      if (!jsonstr) {
        return
      }
      const list = JSON.parse(jsonstr)
      const newArr = [list[0]]
      for (let i = 0; i < list.length; i++) {
        if (i >= list.length - 1) {
          continue
        }
        var endTime = new Date(list[i].endTime).getTime() // 结束时间
        var startTime = new Date(list[i + 1].startTime).getTime() // 下一个开始时间
        if (startTime !== endTime) {
          newArr.push(list[i])
          newArr.push(list[i + 1])
        }
      }
      newArr.push(list[list.length - 1])
      return newArr
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/xjzxCommon.scss';
@import '@/assets/scss/detailsRow.scss';
$c7A7A7A: #7a7a7a;
$c333333: #333333;
$c039D12: #039d12;
$cF56C6C: #f56c6c;
$cE4E7ED: #e4e7ed;
$c1989FA: #1989fa;
$c37CA41: #37ca41;
$cF96159: #f96159;
.el-row {
  border-bottom: 1px solid $cE4E7ED;
}
.f_039D12 {
  color: $c039D12 !important;
}
.f_F56C6C {
  color: $cF56C6C !important;
}
p.times {
  padding: 15px 0;
  font-size: 14px;
  font-weight: 400;
  > span {
    font-size: 14px;
    font-weight: 400;
    &.f_1989FA {
      color: $c1989FA;
      padding-right: 30px;
    }
    &.f_F56C6C {
      color: $cF56C6C;
    }
  }
}
div.lendge {
  margin-bottom: 10px;
  span {
    display: inline-block;
    position: relative;
    padding-left: 24px;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }
    &:first-child {
      &::before {
        background-color: $c37CA41;
      }
      margin-right: 30px;
    }
    &:last-child {
      &::before {
        background-color: $cF96159;
      }
    }
  }
}
.rowRelative {
  span {
    &:last-child {
      margin-left: 85px;
    }
  }
}
</style>
